<template>  
    <div class="container animated fadeIn">  
        <div class="row">  
            <div class="col-md-12">  
                <div class="profile-info-container">  
                    <h3>基本信息</h3>  
                    <div v-for="(infoGroup, groupIndex) in groupedProfileInfos.basic" :key="groupIndex" class="profile-info-group">  
                        <div v-for="(info, index) in infoGroup" :key="index" class="profile-info-row">  
                            <div class="profile-info-name">{{ info.name }}</div>  
                            <div class="profile-info-value" :contenteditable="isEditing" @input="updateValue(groupIndex, 'basic', index, $event.target.innerText || $event.target.value)">  
                                <span v-if="!isEditing">{{ info.value }}</span>  
                                <input v-else type="text" v-model="infoGroup[index].value" />  
                            </div>  
                        </div>  
                    </div>  
                    <h3>学籍信息</h3>  
                    <div v-for="(infoGroup, groupIndex) in groupedProfileInfos.academic" :key="groupIndex" class="profile-info-group">  
                        <div v-for="(info, index) in infoGroup" :key="index" class="profile-info-row">  
                            <div class="profile-info-name">{{ info.name }}</div>  
                            <div class="profile-info-value" :contenteditable="isEditing" @input="updateValue(groupIndex, 'academic', index, $event.target.innerText || $event.target.value)">  
                                <span v-if="!isEditing">{{ info.value }}</span>  
                                <input v-else type="text" v-model="infoGroup[index].value" />  
                            </div>  
                        </div>  
                    </div>  
                    <div class="profile-info-buttons">  
                        <button @click="startEditing">修改信息</button>  
                        <button @click="saveChanges">保存</button>  
                    </div>  
                </div>  
            </div>  
        </div>  
    </div>  
</template>  
  
<script>  
export default {  
    data() {  
        return {  
            isEditing: false,  
            profileInfos: {  
                basic: [  
                    { name: '姓名', value: 'bazi' },  
                    { name: '民族', value: '汉族' }, 
                    { name: '身高', value: '' }, 
                    { name: '体重', value: '' }, 
                    { name: '手机', value: '' },  
                    { name: '宿舍', value: '' } 
                ],  
                academic: [  
                    { name: '学号', value: '20210340712' },  
                    { name: '姓名', value: 'bazi' },  
                    { name: '院系', value: '数学与信息工程学院' },  
                    { name: '年级', value: '2021级' },  
                    { name: '专业', value: '软件工程' },  
                   { name: '班级', value: '软件21-3班' }   
                ]  
            },  
            groupedProfileInfos: {  
                basic: [],  
                academic: []  
            }  
        };  
    },  
    created() {  
        this.groupProfileInfos();  
    },  
    methods: {  
        startEditing() {  
            this.isEditing = true;  
        },  
        saveChanges() {  
            this.isEditing = false;  
            // 这里可以添加额外的保存逻辑，比如发送到服务器  
        },  
        updateValue(groupIndex, section, indexInGroup, value) {  
            if (section === 'basic') {  
                this.groupedProfileInfos.basic[groupIndex][indexInGroup].value = value;  
            } else if (section === 'academic') {  
                this.groupedProfileInfos.academic[groupIndex][indexInGroup].value = value;  
            }  
        },  
        groupProfileInfos() {  
            // 将基本信息和学籍信息分成每组两个的数组  
            this.groupedProfileInfos.basic = this.chunkArray(this.profileInfos.basic, 2);  
            this.groupedProfileInfos.academic = this.chunkArray(this.profileInfos.academic, 2);  
        },  
        chunkArray(array, chunkSize) {  
            const result = [];  
            for (let i = 0; i < array.length; i += chunkSize) {  
                const chunk = array.slice(i, i + chunkSize);  
                result.push(chunk);  
            }  
            return result;  
        }  
    }  
};  
</script>  
  
<style scoped>  
.container {  
    padding: 20px;  
}  
  
.profile-info-container {  
    background-color: #f9f9f9;  
    padding: 20px;  
    border-radius: 8px;  
    box-shadow: 0 0 10px rgba(1, 1, 1, 0.1);  
}  
  
h3,  
h4 {  
    color: #333;  
    margin-bottom: 20px;  
}  
  
.profile-info-group {  
    display: flex;  
    flex-wrap: wrap;  
    margin-bottom: 20px;  
}  
  
.profile-info-row {  
    display: grid;  
    grid-template-columns: 1fr 3fr;  
    gap: 10px;  
    margin-bottom: 10px;  

}  
  
.profile-info-name {  
    font-weight: bold;  
    padding-right: 50px;
    padding-left: 50px;
}  
  
.profile-info-value {  
    position: relative;  
}  
  
.profile-info-value input {  
    width: 100%;  
    box-sizing: border-box;  
    padding: 5px;  
    border: 1px solid #323030;  
    border-radius: 4px;  
}  
  
.profile-info-buttons {  
    margin-top: 20px;  
    display: flex;  
    justify-content: space-between;  
}  
  
/* 页面进入动画 */  
@keyframes fadeIn {  
    from {  
        opacity: 0;  
    }  
    to {  
        opacity: 1;  
    }  
}  
  
.animated.fadeIn {  
    animation-name: fadeIn;  
    animation-duration: 3s;  
}  
</style>